// 月度内调情况 右上角
(function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("right-one-1"));
  var dataArr = {
    xdata: ["1", "2", "3", "4", "5", "6"],
    result: [
      {
        lineData: [220, 235, 200, 340, 320, 270],
        barData: [220, 235, 200, 340, 320, 270],
      },
    ],
    // colors: colors,
    // barColors: barColors,
  };

  function getOptions(dataArr) {
    var option = {
      title: {
        textStyle: {
          align: "center",
          color: "#fff",
          fontSize: 20,
        },
        top: "3%",
        left: "10%",
      },
      backgroundColor: "rgba(0,0,0,0)",
      // grid: {
      //   top: "25%",
      //   bottom: "10%", //也可设置left和right设置距离来控制图表的大小
      // },
      grid: {
        left: "2%",
        right: "6%",
        bottom: "2%",
        top: "25%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      legend: {
        data: ["内调", "内调"],
        top: "10%",
        textStyle: {
          color: "#ffffff",
        },
      },
      xAxis: {
        name: "月",
        data: dataArr.xdata,
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ebf8ac", //X轴文字颜色
          },
        },
      },
      yAxis: [
        {
          type: "value",
          name: "亿元",
          nameTextStyle: {
            color: "#ebf8ac",
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#FFFFFF",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ebf8ac",
            },
          },
        },
        {
          type: "value",
          //name: "同比",
          nameTextStyle: {
            color: "#ebf8ac",
          },
          position: "right",
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            // formatter: "{value} %", //右侧Y轴文字显示
            // textStyle: {
            //   color: "#ebf8ac",
            // },
          },
        },
        {
          type: "value",
          gridIndex: 0,
          min: 50,
          max: 100,
          splitNumber: 8,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
            },
          },
        },
      ],
      graphic: [
        {
          type: "text",
          right: 30,
          top: 10,
          style: {
            text: "返回",
            color: "white",
            fontSize: 12,
            fill: "white",
          },
          onclick: function () {
            goBack();
          },
        },
      ],
      series: [
        {
          name: "内调",
          type: "line",
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: true, //平滑曲线显示
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 10, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#058cff",
          },
          lineStyle: {
            color: "#058cff",
          },
          areaStyle: {
            color: "rgba(5,140,255, 0.2)",
          },
          data: dataArr.result[0].lineData,
        },
        {
          name: "内调",
          type: "bar",
          barWidth: 25,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00FFE3",
                },
                {
                  offset: 1,
                  color: "#4693EC",
                },
              ]),
            },
          },
          data: dataArr.result[0].barData,
        },
      ],
    };
    return option;
  }
  myChart.setOption(getOptions(dataArr));
  var optionStack = [];
  var optionId = "";
  function goBack() {
    //返回
    console.log("===================");
    optionStack.pop();
    console.log(optionStack);
    if (optionStack.length === 0) return;
    if (optionStack.length === 1) optionStack = [];
    optionId = optionStack.join("");
    console.log(optionId);
    resetOption(optionId);
  }

  myChart.on("click", "series", (params) => {
    console.log(params);
    if (optionStack.indexOf(params.name) < 0) {
      optionStack.push(params.name);
    }
    if (optionStack.indexOf(params.seriesName) < 0) {
      optionStack.push(params.seriesName);
    }
    console.log(optionStack);

    optionId = optionStack.join("");
    console.log(optionId);
    resetOption(optionId);
  });
  function resetOption(optionId) {
    // $.ajax({
    //   type: "get", // 请求方式
    //   url: "http://localhost:8081/describeRecordPower", // 请求路径
    //   dataType: "json", // 预期返回一个 json 类型数据
    //   success: function (data) {
    //     // data是形参名，代表返回的数据
    //     if (data.Response.Error != null) {
    //       alert(data.Response.Error.Message);
    //     } else {
    //       console.log(data.Response.Records[0].day_power);
    //     }
    //   },
    // });
    if (optionId == "") {
      //查全部
      dataArr = {
        xdata: ["1", "2", "3", "4", "5", "6"],
        result: [
          {
            lineData: [220, 235, 200, 340, 320, 270],
            barData: [220, 235, 200, 340, 320, 270],
          },
        ],
        // colors: colors,
        // barColors: barColors,
      };
    }
    if (optionId == "1内调") {
      //查1月精煤
      dataArr.xdata = [
        "本部",
        "汾河",
        "晋南",
        "晋北",
        "宏大",
        "五一",
        "晋牛",
        "吕梁",
      ];

      dataArr.result = [
        {
          lineData: [220, 235, 200, 340, 320, 270, 210, 200],
          barData: [220, 235, 200, 340, 320, 270, 210, 200],
        },
      ];
    }
    if (optionId == "1内调本部") {
      //查区域
      dataArr.xdata = ["辛置矿", "李雅庄矿", "团柏矿", "丰峪矿"];

      dataArr.result = [
        {
          lineData: [220, 235, 200, 340],
          barData: [220, 235, 200, 340],
        },
      ];
    }

    myChart.clear();
    myChart.setOption(getOptions(dataArr));
  }
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
